<template>
  <layout-body>
    <div class="shop-create-body">
      <el-form
        ref="createRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="门店名称：" prop="shop_name">
          <el-input v-model="ruleForm.shop_name" placeholder="输入门店名称" />
        </el-form-item>

        <el-form-item label="Logo：" prop="shop_logo">
          <upload-btn
            v-model="ruleForm.shop_logo"
            width="80px"
            height="80px"
            count="1"
          ></upload-btn>
          <help hideIcon>建议尺寸180*180</help>
        </el-form-item>
        <el-form-item label="门牌照：" prop="shop_image">
          <upload-btn
            v-model="ruleForm.shop_image"
            count="1"
            width="234px"
            height="150px"
          ></upload-btn>
          <help hideIcon>建议尺寸468*300</help>
        </el-form-item>

        <el-form-item label="营业时间：" required>
          <el-form-item prop="start_time">
            <el-time-select
              v-model="ruleForm.start_time"
              placeholder="上线时间"
              start="00:00"
              step="00:15"
              end="23:59"
            />
          </el-form-item>
          <span class="ml10 mr10">至</span>
          <el-form-item prop="end_time">
            <el-time-select
              v-model="ruleForm.end_time"
              placeholder="下线时间"
              start="00:00"
              step="00:15"
              end="23:59"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item inline label="联系电话：" prop="phone" required>
          <el-input
            v-model="ruleForm.phone"
            type="text"
            placeholder="输入联系电话"
          />
        </el-form-item>
        <el-form-item label="自提核销：" prop="is_check" required>
            <el-radio-group v-model="ruleForm.is_check">
                <el-radio :label="1" size="large">开启</el-radio>
                <el-radio :label="0" size="large">关闭</el-radio>
            </el-radio-group>
          
        </el-form-item>
        <el-form-item label="状态：" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
        <el-form-item label="地区：" prop="region" required>
          <el-input
            v-model="ruleForm.region"
            type="text"
            placeholder="详细地址"
            disabled
          />
        </el-form-item>
        <el-form-item label="详细地址：" prop="address" required>
          <el-input
            v-model="ruleForm.address"
            type="text"
            placeholder="详细地址"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="ruleForm.location"
            type="text"
            disabled
            placeholder="经纬度"
          />
          <search-map
            class="mt10"
            width="100%"
            v-model="ruleForm.location"
            @change="locationChange"
          ></search-map>
        </el-form-item>
      </el-form>
      <span class="flex center">
        <back-btn>取消</back-btn>
        <el-button
          type="primary"
          :loading="btnLoading"
          :disabled="btnLoading"
          @click="createOk(createRef)"
          >确定</el-button
        >
      </span>
    </div>
  </layout-body>
</template>

  
<script lang="ts" setup >
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import type { FormRules, FormInstance } from "element-plus";
import { Result, ResultError } from "@/types";
import { useRouter } from "vue-router";
import { createShop,updateShop,getShopDetail } from "@/api/store/shop";
const router = useRouter();

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    id?: number | string;
    type?: string;
  }>(),
  {
    id: 0,
    type: "create",
  }
);

const createRef = ref<typeof FormInstance>();

const operation = ref<string>(props.type);

const operationId = ref<number | string>(props.id);

const ruleForm = ref<any>({
  shop_name: "",
  shop_logo: "",
  shop_image: "",
  start_time: "",
  end_time: "",
  phone: "",
  is_check:'1',
  address: "",
  location: "",
  region: [],
  status: 1,
});

const rules = reactive<typeof FormRules>({
  shop_name: [{ required: true, message: "门店名称不能为空", trigger: "blur" }],
  start_time: [{ required: true, message: "请选择营业时间", trigger: "blur" }],
  end_time: [{ required: true, message: "请选择营业时间", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  location: [{ required: true, message: "请选择经纬度", trigger: "blur" }],
});

const locationChange = (res: any) => {
  ruleForm.value.region = [res.pname, res.cityname, res.adname];
  ruleForm.value.address = res.name;
};

const regionSelect = ref<any>([]);

const btnLoading = ref<boolean>(false);

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      let operationApi: any = null;
      if (operation.value == "create") {
        operationApi = createShop(
          Object.assign(
            {
              type: "create",
            },
            ruleForm.value
          )
        );
      } else {
        operationApi = updateShop(
          Object.assign(
            {
              id: operationId.value,
              type: "update",
            },
            ruleForm.value
          )
        );
      }
      operationApi
        .then((res: Result) => {
          $utils.successMsg("保存成功");
          btnLoading.value = false;
          setTimeout(() => {
            router.back();
          }, 1000);
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          btnLoading.value = false;
        });
    }
  });
};

const initLoading = ref<boolean>(false);

const toInit = () => {
  if (!operationId.value) {
    return;
  }
  initLoading.value = true;
  getShopDetail({ id: operationId.value })
    .then((res: Result) => {
      ruleForm.value.shop_name = res.data.shop_name;
      ruleForm.value.shop_logo = res.data.shop_logo;
      ruleForm.value.shop_image = res.data.shop_image;
      ruleForm.value.start_time = res.data.start_time;
      ruleForm.value.end_time = res.data.end_time;
      ruleForm.value.phone = res.data.phone;
      ruleForm.value.address = res.data.address;
      ruleForm.value.location = res.data.location;
      ruleForm.value.region = [res.data.region.province,res.data.region.city,res.data.region.region];
      ruleForm.value.is_check = res.data.is_check;
      ruleForm.value.status = res.data.status.value;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  let query = router.currentRoute.value.query;
  if (query && query.id && Number(query.id) > 0) {
    operationId.value = String(query.id);
    operation.value = "编辑";
  }
  toInit();
});
</script>

<style scoped>
.shop-create-body {
  width: 800px;
  margin: 40px auto;
}
</style>